<template>
    <div class="addOrEdit">
        <el-dialog
            :before-close="handClose"
            center
            width="50%"
            title="详情"
            :visible.sync="off"
            append-to-body>
            <div id="printContent">
                <el-form :model="rowData" ref="ruleForm" label-width="100px" label-position="left" size="mini" class="demo-ruleForm">
                    <div class="border-line" style="border-bottom: 1px solid #ccc;border-top: 1px solid #ccc;margin: -10px 0px 10px 0px;padding-top: 10px;">
                        <el-form-item label="订单编号">
                            <span>{{rowData.orderId}}</span>
                        </el-form-item>
                        <el-form-item label="下单时间">
                            <span>{{rowData.now}}</span>
                        </el-form-item>
                        <el-form-item label="订单状态">
                            <span style="color: pink;">{{rowData.orderStatus}}</span>
                        </el-form-item>
                    </div>
                    <el-form-item label="联系人名">
                    <span>{{rowData.name}}</span>
                    </el-form-item>
                    <el-form-item label="联系电话">
                    <span>{{rowData.mobile}}</span>
                    </el-form-item>
                <el-form-item label="联系地址">
                        <span>{{rowData.address}}</span>
                    </el-form-item>
                </el-form>

                <el-table class="printBorder" max-height="400" show-summary :data="saleData" style="width: 100%" border>
                    <el-table-column prop="goodsName" label="商品名称" align="center">
                    </el-table-column>
                    <el-table-column prop="amount" label="数量(个)" align="center">
                    </el-table-column>
                    <el-table-column prop="price" label="单价(元)" align="center">
                    </el-table-column>
                    <el-table-column prop="" label="优惠" align="center">
                    </el-table-column>
                </el-table>
                <el-row type="flex" align-items="end" justify="end" style="margin-top: 10px;">
                <span style="font-size: 20px;">总金额: &nbsp;{{orderTotalPrice.toFixed(1)}}元</span>
                </el-row>
            </div>
             <span slot="footer" class="dialog-footer" style="text-align: center">
                <el-button @click="cancel">取 消</el-button>
                <el-button v-print="'#printContent'" type="primary">打印</el-button>
            </span>
        </el-dialog>
    </div>
   
</template>

<script>
    import { orderDetail } from "@/api/store/sale.js"
    export default {
        name: "orderDetail",
         props: {
            off: {
                type: Boolean
            },
            rowData: {
                type: Object
            },
        },
        watch: {
            off(val){
                if(val){
                    orderDetail({
                        orderId: this.rowData.orderId
                    }).then(
                        res => {
                            this.saleData = res.data;
                            this.saleData.forEach((e) => {
                                this.orderTotalPrice += e.amount * e.price;
                            });
                        },
                        err => {}
                    );
                }
            }
        },
        data(){
            return {
               orderTotalPrice: 0,
               saleData: []
            }
        },
        methods: {
            cancel(){
                this.handClose();
            },
            handClose(){
                this.$emit("update:off", false);
            }
        }
    }
</script>

<style lang="less" scoped>
.el-input--mini {
    /deep/textarea{
        height: 500px;
    }
} 
@media print{
    /deep/.printBorder{
        border-collapse: collapse;
    }
    /deep/.printBorder table td, 
    /deep/.printBorder table th{
        border: 1px solid rgb(227, 245, 227) !important;
    }
    .border-line{
        border: none !important;
    }
 }   
</style>